<template>
  <div>
    <button @click="fn1">获取图书列表 -- get请求</button>
    <button @click="fn2">查询某本图书信息 -- get请求携带参数</button>
    <button @click="fn3">添加一本本 -- post请求</button>


    <button @click="fn4">发请求到别的服务器里的接口 -- 获取笑话</button>
  </div>
</template>

<script>

// 导入axios
import axios from 'axios'
// 配置axios的基地址
axios.defaults.baseURL = 'http://123.57.109.30:3006'

export default {

  methods: {

    fn1 () {

      // 用axios发get请求
      // 如果省略了method默认就是get
      axios({
        url: 'api/getbooks',
      })
      .then( res => {
        // 请求成功调用这里，res就是返回的数据
        console.log(res)
      })
      .catch (err => {
        // 如果请求出错会打印
        console.log('出错了')
      })
    },

    fn2 () {

      axios({
        url: '/api/getbooks',
        // get请求参数用params
        params: {
          bookname: '西游记'
        }
      })
      .then (res => {

        console.log(res) 
      })

    },

    fn3 () {

      axios({
        url: '/api/addbook',
        // 注意，只要不是get请求，都不能省略method
        method: 'post',
        // data属性携带参数
        data: {
          appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",
          bookname: '霸道七七爱上王伟',
          author: '利群',
          publisher: '晋江文学社'
        }
      })
      .then (res => {

        console.log(res)
      })
    },

    fn4 () {

      // 发请求获取笑话
      // 发现如果你写了完整的接口地址，它就不帮你拼接了
      // 判断依据是看有没有协议头（了解）
      axios({
        url: 'http://ajax.zllhyy.cn/joke'
      })
      .then (res => {

        console.log(res)
      })
    }
  }
}
</script>

<style>

</style>